<template>
  <div class="mainPad">
    <div class="xxlist">
      <div class="l1">
        <div class="ti">
          用户名：
        </div>
        <input class="border-none outline-none" type="text" placeholder="用户名" v-model="username">
      </div>
      <div class="l1">
        <div class="ti">
          密码：
        </div>
        <input class="border-none outline-none" type="text" placeholder="密码" v-model="password">
      </div>
    </div>
    <div class="qrzf">
      <div class="my-2" @click="login">登录</div>
    </div>
    <div class="qrzf1" @click="toEnroll">
      <div class="my-2">去注册</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store, {userStore} from "../store";
import {onBeforeMount} from "vue";
import {ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router/dist/vue-router";


function setTitle(){
  store.state.tit="用户登录"
}

onBeforeMount(()=>{
  setTitle()
})

const username = ref('')
const password = ref('')
const router = useRouter()
const userstore = userStore()
const login = ()=>{
  console.log(username.value)
  console.log(password.value)
  const data = {
    "username": username.value,
    "password": password.value,
  }

  axios.get('/path/pub/auth/auth-token',{params:{userId:username.value,password:password.value}}
  ).then(res=>{
    console.log(res.data)
    userstore.userId = res.data.userId
    userstore.username = data.username
    if(username.value===res.data.userId){
      router.push('/home')
    }
    else {
      alert("账号或密码错误")
    }

  })
}

const toEnroll = () =>{
  router.push('/enroll')
}

</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}
.l1{
  @apply m-2 flex flex-row;
}

.ti{
  width: 25%;
  @apply flex font-semibold text-gray-700;
}

.t{
  @apply flex text-gray-400;
}

.qrzf{
  @apply border rounded-md bg-green-500 text-white font-semibold
  flex justify-center content-center items-center m-2;
}

.qrzf1{
  @apply border rounded-md bg-gray-200 font-semibold text-gray-700
  flex justify-center content-center items-center m-2;
}

.barPad {
  @apply w-full flex flex-row h-16 justify-center content-center items-center
  border border-solid border-gray-300 shadow-lg
  bottom-0 fixed;
}

.barPad div {
  @apply basis-1/4 text-center;
}
</style>